<template>
  <div>
    <nav-top NavI="true"
             class="nav"
             Licon="back"
             title="序列号详情"
             Ricon="filter"
             Rtxt="筛选"
             @callback="trigger"></nav-top>
    <div class="serial-detail gl-content">
      <div class="titles">
        <div class="inc flex jcb">
          <div class="inner">
            收入
            <br />
            <div class="number wsnw">
              ¥{{ serialDetail.real_pay.toFixed(2) }}
            </div>
          </div>
          <div class="btn vam tac"
               @click="change">再分配</div>
        </div>
        <div class="detail">
          <div class="name">{{ serialDetail.school_name }}</div>
          <div class="others">
            已支付 剩余：{{ serialDetail.count }}/{{
            serialDetail.amount - serialDetail.count
            }}<span class="proxy-name">{{ serialDetail.xname }}</span>
          </div>
        </div>
      </div>
      <load-more class="list "
                 :no-data="allLoaded"
                 show-bottom
                 @bottom="loadBottom"
                 @loading="moreLoading">
        <div class="item flex jcb"
             v-for="(item, i) in detailList"
             :key="i">
          <div class="num">{{ item.serial }}</div>
          <div class="pay-type">
            <span v-show="item.status == 1">未激活</span>
            <span v-show="item.status == 2">已支付</span>
            <span v-show="item.status == 3">已禁用</span>
            <span v-show="item.status == 4">已激活</span>
            <span v-show="item.status == 5">已回收</span>
          </div>

          <div class="opt tac wsnw"
               :class="{ show: item.status == 2 }"
               @click="showDetail(item.status, item.serial, i)">
            详情
          </div>
          <div :class="{ active: item.status != 2 }"
               class="state"
               @click="active(item.status, item.id, item.serial)">
            <span v-show="item.status == 2">禁用</span>
            <span v-show="item.status == 1 || item.status == 4">激活</span>
            <span v-show="item.status == 3">启用</span>
            <span v-show="item.status == 5">查看</span>
            <!-- {{ item.status == 2 ? "禁用" : "激活" }} -->
          </div>
        </div>
        <div v-show="!detailList.length"
             class="tips">暂无数据</div>
      </load-more>
      <!--<load-more-tip :noData="allLoaded" :loading="loadingMore"></load-more-tip>-->
    </div>
    <!-- 筛选条件页面 -->
    <rightScope :rightList="rightList"
                :RightScope="RightScope"
                @cencel='cencel'
                @submit="submit"
                @clear="clear"
                @btnClick="btnClick"></rightScope>
    <!-- 筛选条件页面end -->
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'SerialDetail',
  data() {
    return {
      id: '',
      allLoaded: '',
      detailList: [],
      RightScope: false, //控制右侧边框
      rightList: [
        {
          title: '年级选择',
          id: '',
          show: true,
          dis: false,
          //   type: true,
          list: [
            { label: '全部', id: '' }
            // { label: "", id: "9" },
            // { label: "", id: "8" },
            // { label: "", id: "7" }
          ]
        },
        {
          title: '班级选择',
          id: '',
          show: true,
          dis: false,
          //   type: true,
          list: [
            { label: '全部', id: '' }
            // { label: "1班", id: 1 },
            // { label: "2班", id: 6 },
            // { label: "3班", id: 30 },
            // { label: "4班", id: "before" }
          ]
        },
        {
          title: '状态筛选',
          id: '',
          //   type: true,
          show: true,
          dis: false,
          list: [
            { label: '全部', id: '' },
            { label: '未激活', id: 1 },
            { label: '已激活', id: 4 },
            { label: '已支付', id: 2 },
            { label: '已禁用', id: 3 },
            { label: '已回收', id: 5 }
          ]
        }
      ],
      isindex: 0,
      nianjiId: '',
      banjiId: '',
      statusId: '',
      isShow: true,
      loadingMore: false
    }
  },
  created() {
    // console.log(this.serialDetail);
    this.id = this.$route.params.id
    this.getCardInfoList()

    this.getClass()

    this.getClassList()
  },

  computed: {
    ...mapGetters(['serialDetail', 'proxy_id'])
  },
  methods: {
    ...mapMutations(['setVipDetail']),
    // 获取序列号信息列表
    getCardInfoList() {
      this.Http.getCardInfoList({
        id: this.id,
        type: 1,
        status: this.statusId,
        nianji_id: this.nianjiId,
        class_id: this.banjiId
      })
        .then(res => {
          // console.log(res);
          this.detailList = res.list.reverse()
        })
        .catch(err => {
          // console.log(err);
          this.$toast({
            message: err.msg,
            duration: 500
          })
        })
    },
    // 年级列表
    getClass() {
      // console.log(this.serialDetail.school_id);
      this.Http.getClassList({
        school_id: this.serialDetail.school_id,
        nianji_id: this.nianjiId
      }).then(res => {
        let temp = []
        let arr = res.list
        // console.log(arr);
        // return;
        if (arr.length) {
          // 数组去重
          let result = [arr[0]]
          for (let i = 1; i < arr.length; i++) {
            arr[i].nianji !== arr[i - 1].nianji && result.push(arr[i])
          }
          // console.log(result);

          result.map(item => {
            temp.push({ label: item.nianji, id: item.nianji_id })
          })
        } else {
          temp = [{ label: '暂无年级' }]
        }

        // console.log(temp);
        this.rightList[0].list.splice(
          1,
          this.rightList[0].list.length,
          ...temp.reverse()
        )
        // console.log(this.rightList[0].list);
      })
    },
    // 班级列表
    getClassList() {
      this.Http.getClassList({
        school_id: this.serialDetail.school_id,
        nianji_id: this.nianjiId
      }).then(res => {
        // console.log(res.list);
        let temp = []
        if (res.list.length) {
          res.list.map(val => {
            temp.push({ label: val.name, id: val.id })
          })
        } else {
          temp = [{ label: '暂无班级' }]
        }

        // console.log(temp);
        this.rightList[1].list.splice(1, this.rightList[1].list.length, ...temp)
      })
    },
    getList() {},

    moreLoading(val) {
      this.loadingMore = val
    },
    loadBottom() {
      // console.log("bottom");
    },
    change() {
      this.$router.push({
        name: 'SerialChange'
      })
    },
    // 状态
    active(item, id, serial) {
      // console.log(item, id, serial);
      // 激活
      if (item == 1) {
        this.$router.push({
          params: {
            serial,
            id
          },
          name: 'SerialActive'
        })
      }
      // 禁用
      if (item == 2) {
        this.$messagebox.confirm('确定禁用序列号？').then(action => {
          // console.log("确定");
          this.Http.editCard({
            id,
            status: 3
          }).then(res => {
            // console.log(res);
            this.getCardInfoList()
          })
        })
      }
      // 启用
      if (item == 3 || item == 4) {
        this.$messagebox.confirm('确定启用序列号？').then(action => {
          // console.log("确定");
          this.Http.editCard({
            id,
            status: 2
          })
            .then(res => {
              // console.log(res);
              this.getCardInfoList()
            })
            .catch(err => {
              // console.log(err);
              this.$toast({
                message: err.msg,
                duration: 1500
              })
            })
        })
      }
      // 查看
      if (item == 5) {
        this.$router.push({
          params: {
            id
          },
          name: 'Recovery'
        })
      }
    },
    // 详情
    showDetail(item, serial, index) {
      // console.log(item);
      if (item == 2) {
        this.$router.push({
          params: {
            serial
          },
          name: 'SerialOneDetail'
        })
        // console.log(this.detailList[index])
        // this.setVipDetail(this.detailList[index])
      }
    },
    // 筛选
    trigger(val) {
      // console.log(val);
      if (val == 'back') {
        this.$router.go(-1)
      } else {
        this.RightScope = true
      }
    },
    // 取消
    cencel() {
      this.RightScope = false
    },
    // 清空
    clear() {
      this.rightList.map(e => {
        e.id = ''
      })
      this.nianjiId = ''
      this.banjiId = ''
      this.statusId = ''
      this.getClassList()
    },
    // 点击选择
    btnClick(item, ite) {
      // console.log(item, ite);
      item.id = ite.id

      if (item.title == '年级选择') {
        // console.log(item.id);
        this.nianjiId = item.id
        this.getClassList()
      }
      if (item.title == '班级选择') {
        // console.log(item.id);
        this.banjiId = item.id
      }
      if (item.title == '状态筛选') {
        // console.log(item.id);
        this.statusId = item.id
      }
    },
    // 提交
    submit() {
      this.RightScope = false
      // console.log(this.nianjiId, this.banjiId, this.statusId);
      this.getCardInfoList()
    },
    // 显示与隐藏
    changeType(index) {
      // console.log(index);
      this.rightList[index].type = !this.rightList[index].type
      // this.isShow = !this.isShow;
    }
  }
}
</script>

<style scoped lang="less">
.titles {
  margin-bottom: 40px;
}

.serial-detail {
  min-height: calc(100vh - 175px);
}

.inc {
  padding: 34px 34px 86px;
  line-height: 1;
  color: #fff;
  font-size: 24px;
  background: linear-gradient(-83deg, rgb(20, 200, 255), rgb(2, 151, 255));
  box-shadow: 0 7px 12px 0 rgba(79, 184, 254, 0.4);
  border-radius: 20px;
  .number {
    margin-top: 13px;
    font-size: 36px;
    font-weight: bold;
  }
  .btn {
    width: 140px;
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    background: #fff;
    color: #0cb1ff;
    box-shadow: 0 6px 10px 0 rgba(4, 127, 214, 0.14);
    border-radius: 32px;
  }
}

.detail {
  margin-top: -52px;
  padding: 34px 36px;
  line-height: 1;
  font-size: 24px;
  color: #8c898f;
  background: #fff;
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  .name {
    margin-bottom: 24px;
    font-size: 36px;
    color: #222;
    font-weight: bold;
  }
  .proxy-name {
    margin-left: 48px;
  }
}

.list {
  //  width: 678px;
  height: calc(100vh - 508px);
  // height: 653px;
  padding: 0 36px;
  overflow: scroll;
  background: #fff;
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  line-height: 1;
  color: #999;
  font-size: 24px;
  .item {
    align-items: center;
    padding: 30px 0;
    > :nth-child(n) {
      min-width: 52px;
    }
  }
  .num {
    font-size: 40px;
    color: #222;
    font-weight: bold;
  }
  .opt {
    width: 68px;
    height: 36px;
    line-height: 36px;
    background: rgb(252, 246, 237);
    border-radius: 18px;
    color: #ff9e19;
    opacity: 0;
    &.show {
      opacity: 1;
    }
  }
  .state {
    color: #eb6161;
    &.active {
      color: #14c8ff;
    }
  }
}

.tips {
  font-size: 32px;
  text-align: center;
  margin-top: 50px;
}



.nav {
  background-color: #f7f8fa;
}
</style>
